<template>
  <div class="bless-red-packet">
    <router-link to="/InviteOpen">
      <button :style="{width:attr_button.width}" :class="attr_button.class">{{attr_button.text}}</button>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'bless-red-packet',
  props: {
    attr_button: {
      type: Object,
      required: true,
      validator: function (value) {
        return true;
      }
    }
  },
  data() {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .love-button {text-align: center;}
  .love-button button {
    font-size: 1.8rem;
    color: #dec852;
    border-radius: 1rem;
    border: #dec852 2px solid;
    padding: 0.5rem;
    outline: none;
    background-color: rgba(222, 91, 82, 0.87);
  }
  .love-button button:hover {
    border-color: rgba(255,255,255,0);
  }

</style>
